<template>
  <div class="menu">
    <el-card class="box-card">
      <div class="addBtn">
        <el-button icon="el-icon-edit" type="success">添加菜单</el-button>
      </div>
      <div class="tableMenu">
        <el-table
          row-key="id"
          :data="tableData"
          style="width: 100%"
          default-expand-all
          :tree-props="{children: 'childs', hasChildren: 'points'}">
          <el-table-column
            prop="title"
            label="标题"
            width="200">
            <template v-slot='scope'>
              <i style="margin-right:5px" v-if="scope.row.pid===null" class="el-icon-folder-opened"></i>
              <i style="margin-right:5px" v-else-if="!scope.row.is_point" class="el-icon-document"></i>
              <i style="margin-right:5px" v-else class="el-icon-view"></i>
              <span>{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="权限点代码">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            align="center">
            <template>
              <el-button class="editBtn" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button class="delBtn" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/base/menus'
import { changeTreeDate } from '@/utils/index.js'
export default {
  data () {
    return {
      tableData: []
    }
  },

  created () {
    this.loadList()
  },

  methods: {
    async loadList () {
      const { data: res } = await list()
      // console.log(res)
      this.tableData = changeTreeDate(res, 'points', 'childs')
    }
  }
}
</script>

<style scoped lang='less'>
.menu{
  padding: 20px;
  /deep/.addBtn{
    border-bottom: unset;
    display: flex;
    justify-content: flex-end;
    .el-button{
      font-size: 12px;
      padding: 10px 15px;
    }
  }
  .tableMenu{
    margin-top: 20px;
    .editBtn{
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
    }
    .delBtn{
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;
    }

  }
}
</style>
